<template>
  <div class="page-wrap">
    <el-affix :offset="60">
      <el-anchor direction="horizontal" container=".page-wrap" @click.prevent>
        <el-anchor-link href="#one">one</el-anchor-link>
        <el-anchor-link href="#two">two</el-anchor-link>
      </el-anchor>
    </el-affix>
    <h2 id="one" style="margin-bottom: 20px">表格1 - 接口获取表格数据</h2>
    <tableToChart
      v-model:showDialog="showDialog"
      :columns="tableColumns"
      :tableData="tableData"
      @clickChart="clickChart"
    />
    <!--表格-->
    <PiTable
      isSearch
      rowKey="oid"
      :height="500"
      :loading
      :searchFormList
      :settingColumns
      :tableColumns
      :tableData
      :pagination
      @pageChange="pageChange"
      @confirmSetting="init"
      @radioChange="radioChange"
      @onSearch="onSearch"
    >
      <template #tableHeader>
        <el-button type="primary">添加</el-button>
        <el-button type="primary" style="margin-bottom: 14px" @click="showDialog = true">
          新建图表
        </el-button>
      </template>
      <template #operation="{ row }">
        <el-space>
          <el-button v-auth="['user']">提交</el-button>
          <el-link type="primary" @click="onEdit(row)">
            <el-icon><Edit /></el-icon>
          </el-link>
          <el-link type="danger">
            <el-icon><Delete /></el-icon>
          </el-link>
        </el-space>
      </template>
    </PiTable>

    <h2 id="two" style="margin-bottom: 20px">表格2 - 本地mock数据（前端分页）</h2>
    <PiTable
      ref="piTable"
      isSearch
      rowKey="number"
      :tableData="tableData2"
      :tableColumns="tableColumns2"
      :pagination="page2"
      @dragSort="dragSort"
      @selectionChange="selectionChange"
    >
      <!--<template #tableHeader>-->
      <!--  <el-button type="primary">年龄T</el-button>-->
      <!--</template>-->
      <template #number="scope">
        <el-link type="primary">{{ scope.row.number }}</el-link>
      </template>
      <template #name="scope">
        <el-input
          v-if="scope.row.status === 'edit'"
          v-model.trim="scope.row.name"
          placeholder="请输入"
          style="width: 96%"
        />
        <span v-else>{{ scope.row.name }}</span>
      </template>
      <template #handle="scope">
        <el-space>
          <el-link type="primary" @click="changeTableData(scope.row)">编辑</el-link>
          <el-link type="danger">删除</el-link>
        </el-space>
      </template>
    </PiTable>
  </div>
</template>

<script setup>
const piTable = ref(null); //表格ref
const loading = ref(false);
const showDialog = ref(false);
const tableColumns = ref([
  {
    type: 'selection', //与单选互斥
    label: '复选',
    reserveSelection: true, //数据刷新后是否保留选中项
  },
  { prop: 'projectShortName', label: '编号', sortable: true, sort: 'DESCENDING' },
  { prop: 'projectAbbreviation', label: '简称', sortable: true, sort: 'DESCENDING' },
  { prop: 'thePersistInfo.createStamp', label: '创建时间', sortable: true, sort: 'DESCENDING' },
  { prop: 'projectName', label: '名称', sortable: true },
]);
const tableData = ref([
  {
    projectShortName: '00123',
    projectAbbreviation: 'test',
    projectName: 'test',
    'thePersistInfo.createStamp': '2025-04-08',
  },
  {
    projectShortName: '00124',
    projectAbbreviation: 'test2',
    projectName: 'test2',
    'thePersistInfo.createStamp': '2025-04-08',
  },
]);
const settingColumns = {
  getColumns: window.$api.demo.setProjectTableColumns,
  getColumnsParams: {
    tableID: 'ProjectTable',
    softType: 'com.pisx.pmgt.project.PIProject',
  },
  setColumns: window.$api.demo.saveProjectTableColumns,
  setColumnsParams: { tableID: 'ProjectTable' },
};
const pagination = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 2,
});
const searchFormList = [
  {
    label: '编号',
    prop: 'name',
    tag: 'el-input',
    attrs: {
      placeholder: '请输入',
    },
  },
  {
    label: '创建时间',
    prop: 'age',
    tag: 'el-date-picker',
    attrs: {
      placeholder: '请输入',
      type: 'date',
    },
  },
  // {
  //   label: '籍贯',
  //   prop: 'place',
  //   tag: 'el-select',
  //   attrs: {
  //     placeholder: '请选择',
  //   },
  //   children: {
  //     tag: 'el-option',
  //     options: [
  //       {
  //         label: '湖北',
  //         value: 'hb',
  //       },
  //     ],
  //   },
  // },
];

const page = reactive({
  pageNum: 1, //当前页
  pageSize: 10, //每页数
  total: 0, //数据总量
});
const tableColumns2 = ref([
  {
    type: 'selection', //与单选互斥
    label: '复选',
    reserveSelection: true, //数据刷新后是否保留选中项
  },
  {
    type: 'radio', //与复选互斥
    label: '单选',
    align: 'center',
    width: 55,
  },
  {
    type: 'expand',
    label: '#',
  },
  {
    type: 'drag',
    label: 'drag',
    width: 60,
  },
  //树状表格不建议使用序号
  {
    type: 'index',
    label: '序号',
    // width: 60,
  },
  {
    prop: 'number',
    label: '编号',
    filter: 'input',
    sortable: true,
  },
  {
    prop: 'name',
    label: '姓名',
    filter: 'select',
    search: true, //该列是否可在顶部搜索框搜索出来（前端分页用）
    // width: 800,
    // fixed: true,
  },
  {
    prop: 'age',
    label: '年龄',
  },
  {
    prop: 'time',
    label: '创建时间',
    filter: 'date',
  },
  {
    prop: 'handle',
    label: '操作',
    fixed: 'right',
    width: 200,
  },
]);
const tableData2 = ref([]);
const page2 = reactive({
  pageNum: 1, //当前页
  pageSize: 10, //每页数
  total: 21, //数据总量
  fullData: true, //全量数据返回
});
tableData2.value = [
  {
    number: '001',
    name: '张三',
    age: 18,
    // idCard: 18,
    // email: '595875750@qq.com',
    // address: '武汉',
    time: '2023-12-01',
    status: 'normal',
    // children: [
    //   {
    //     number: '002',
    //     name: '王五',
    //     age: 19,
    //     time: '2023-12-01',
    //     children: [
    //       {
    //         number: '005',
    //         name: '老六',
    //         age: 20,
    //         time: '2023-12-01',
    //         children: [],
    //       },
    //     ],
    //   },
    //   {
    //     number: '003',
    //     name: '狗蛋',
    //     age: 20,
    //     time: '2023-12-01',
    //     children: [],
    //   },
    // ],
  },
];
for (let i = 0; i < 18; i++) {
  tableData2.value.push({
    number: i,
    name: '李四',
    age: 20,
    time: '2023-12-04',
    status: 'normal',
  });
}
tableData2.value.push(
  {
    number: 25,
    name: '王五',
    age: 25,
    time: '2023-12-05',
    status: 'edit',
  },
  {
    number: 26,
    name: '老六',
    age: 26,
    time: '2023-12-06',
    status: 'normal',
  },
);

onMounted(() => {
  // console.log(piTable.value.element.stripe); //直接使用element表格的属性、方法
  init();
});

const init = () => {
  // loading.value = true;
  window.$api.demo
    .getTableColumns({
      tableID: 'ProjectTable',
      softType: 'com.pisx.pmgt.project.PIProject',
      page: pagination.pageNum,
      range: pagination.pageSize,
    })
    .then((res) => {
      loading.value = false;
      tableColumns.value = res.data.columns;
      tableData.value = res.data.rows;
      pagination.total = res.data.total;
    })
    .catch((err) => {
      window.$message.error(err);
    });
};
const pageChange = (pageNum, pageSize) => {
  pagination.pageNum = pageNum;
  pagination.pageSize = pageSize;
  init();
};
const onSearch = (val) => {
  console.log(val);
};
/**
 * 修改表格数据
 * @row {object} 修改的行
 * */
const changeTableData = (row) => {
  row.status = 'edit';
};
/**
 * 表格拖拽
 * @indexObj {object} 拖拽的数据的新旧下标
 * */
const dragSort = (indexObj) => {
  let oldIndex = indexObj.oldIndex + page2.pageSize * (page2.pageNum - 1); //拖拽元素的拖拽前的位置
  let newIndex = indexObj.newIndex + page2.pageSize * (page2.pageNum - 1); //拖拽元素的拖拽后的位置

  //元素交换位置
  function swapArrayElements(arr, index1, index2) {
    [arr[index1], arr[index2]] = [arr[index2], arr[index1]];
  }
  swapArrayElements(tableData2.value, oldIndex, newIndex);
};
/**
 * 表格复选框勾选
 * @list {array} 选择的数据
 * */
const selectionChange = (list) => {
  console.log(list);
};
/**
 * 表格单选
 * @val {string} 选择的数据
 * */
const radioChange = (val) => {
  console.log(val);
};
/**
 * 点击图表
 * @params {object} 点击的图表的item
 * */
const clickChart = (val) => {
  console.log(val);
};
</script>

<style lang="less" scoped></style>
